<template>
	<u-popup :show="visible" @close="close">
		<view class="popup">
			<view class="popup-header">
				<image :src="ossUrl + `/static/16.png`"></image>
				切换名片
			</view>
			<view class="list changeCard">
				<view class="list-item" v-for="it in list">
					<u-swipe-action>
						<u-swipe-action-item :options="options" :threshold='60' @click="swipeDction" :name="it.id">
							<view :class="businessCard == it.id ? 'list_item' : 'list_item'">
								<!-- <image :src="ossUrl + `/static/19.png`" mode="" class="list_item-bg"
									v-if="businessCard == it.id"></image> -->
								<view class="list_item-conent">
									<image :src="it.head" mode="" class="list_item-conent-bg"></image>
									<view class="list_item-conent-r">
										<view class="list_item-conent-r-h">
											<view class="list_item-conent-r-h-name">{{ it.nickname }}
												<text style="margin-left: 10rpx;font-weight: 400;
													font-size: 30rpx;
													color: #292929;"
												>
													{{ it.letter ? `(${it.letter})` : '' }}</text>
											</view>
										</view>
										<view class="list_item-conent-r-subTitle flex-row-between">
											{{ it.name }}
											<text :class="{ 'text-active': businessCard == it.id }">默认名片</text>
										</view>
										<view class="list_item-conent-r-address">{{ it.company }}</view>
									</view>
								</view>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import {
	InformationBusinessCardList,
	InformationSwitchBusinessCard,
	InformationDelBusinessCard
} from '@/common/http/api.js'
export default {
	props: {
		businessCard: {
			type: Number | String,
			default: () => ''
		}
	},
	data() {
		return {
			visible: false,
			options: [{
				text: '删除',
				style: {
					backgroundColor: '#f56c6c'
				}
			}],
			list: []
		}
	},
	created() {

	},
	methods: {
		sure(id) {
			uni.showLoading()
			InformationSwitchBusinessCard({ id }).then(res => {
				uni.hideLoading()
				uni.showToast({duration:3000,
					title: '切换成功！',
					icon: 'none'
				})
				this.visible = false
				this.$store.dispatch('getShare')
				this.$emit('reload')
			})
		},
		swipeDction(e) {
			console.log('e', e)
			uni.showModal({
				title: '',
				content: '请确认是否删除？',
				showCancel: true,
				cancelText: '取消',
				confirmText: '确认',
				confirmColor: '#e4393c',
				success: res => {
					if (res.confirm) {
						uni.showLoading()
						InformationDelBusinessCard({ id: e.name }).then(res => {
							uni.hideLoading()
							uni.showToast({duration:3000,
								title: '删除成功！',
								icon: 'none'
							})
							this.visible = false
							this.$emit('reload')
						})
					}
				}
			});

		},
		show() {
			this.list = []
			InformationBusinessCardList().then(res => {
				this.list = res.data
			})
			this.visible = true
		},
		close() {
			this.visible = false
		},
		toEditData(id) {
			this.visible = false
			uni.navigateTo({
				url: '/pagesC/index/editData?id=' + id
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.popup {
	width: 100%;
	position: relative;

	.popup-header {
		padding: 27rpx 0;
		position: relative;

		image {
			position: absolute;
			top: 30rpx;
			left: 38rpx;
			width: 30rpx;
			height: 30rpx;
		}

		font-family: PingFang;
		font-weight: 400;
		font-size: 30rpx;
		color: #131313;
		text-align: center;
	}
}

.list {
	width: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	height: 700rpx;
	overflow-y: scroll;

	.list-item {
		width: 100%;
		margin-bottom: 12rpx;

		.list_item {
			width: 100%;
			position: relative;
			height: 210rpx;
			border: 1rpx solid #CECECE;
			box-sizing: border-box;
			border-radius: 20rpx;

			.list_item-bg {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				height: 100%;
			}

			.list_item-conent {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 3;
				display: flex;
				box-sizing: border-box;
				padding: 43rpx 21rpx;

				&>image {
					border-radius: 50%;
					width: 107rpx;
					height: 106rpx;
					margin-right: 26rpx;
				}

				.list_item-conent-r {
					flex: 1;
					min-width: 0;

					.list_item-conent-r-h {
						display: flex;
						margin-bottom: 20rpx;
						align-items: center;
						justify-content: space-between;

						.list_item-conent-r-h-name {
							font-family: PingFang;
							font-weight: 400;
							font-size: 30rpx;
							color: #131313;
						}

						.list_item-conent-r-h-edit {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #292929;

							image {
								width: 34rpx;
								height: 34rpx;
								margin-right: 6rpx;
							}
						}

					}

					.list_item-conent-r-subTitle {
						font-family: PingFang;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						margin-bottom: 14rpx;

						.text-active {
							color: #55b635;
						}
					}

					.list_item-conent-r-address {
						font-family: PingFang;
						font-weight: 400;
						font-size: 24rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.list_item-ac {
			border: 0rpx;
		}
	}

	.add {
		display: flex;
		justify-content: center;
		align-items: center;

		&>image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 28rpx;
		}

		font-family: PingFang;
		font-weight: 400;
		font-size: 30rpx;
		color: #131313;
	}
}
</style>